import React, { useState } from "react"
import $ from "jquery"
import instance from "../../utils/instance"
import { setCookie } from "../../utils/cookie"
import "./Login.css"

function Login(props) {
    const [current, setCurrent] = useState("Login")
    const [username, setUsername] = useState("")
    const [phone, setPhone] = useState("")
    const [password, setPassword] = useState("")
    const [rePassword, setRePassword] = useState("")
    const changeContent = (e) => {
        let content = $(e.target).data("info")
        setCurrent(content)
        $(e.target).addClass("active").siblings().removeClass("active")
    }
    const loginClick = (e) => {
        if (username !== "" && password !== "") {
            instance.post("/users/login", {
                username,
                password
            }).then(data => {
                if (data.data.errno === 0) {
                    let token = data.data.data.token
                    let time = 60 * 60 * 24 * 3 * 1000
                    setCookie("token", token, time)
                    window.location.href = "#/home"
                }
            }).catch(err => {
                alert("登录失败!")
            })
        } else {
            alert("请输入以上信息后进行登录!")
        }
    }
    const registerClick = (e) => {
        if (username !== "" && phone !== "" && password !== "" && password === rePassword) {
            instance.post("/users/create", {
                username,
                phone,
                password
            }).then(data => {
                if (data.data.errno === 0) {
                    alert("注册成功，请返回登录")
                    setCurrent("Login")
                }
            }).catch(err => {
                alert("注册失败!用户名或者手机号已被注册")
            })
        }
    }
    return (
        <div className="login_container">
            <div className="login_logo">
                <h1>问答专区</h1>
            </div>
            <div className="login_content">
                <div className="login_content_head">
                    <ul>
                        <li className="active" onClick={(e) => { changeContent(e) }} data-info="Login">登录</li>
                        <li data-info="Register" onClick={(e) => { changeContent(e) }}>注册</li>
                    </ul>
                </div>
                {
                    current === "Login" ? (
                        <div className="login_form">
                            <form>
                                <ul>
                                    <li>
                                        <label className="iconfont iconyonghu" htmlFor="login_username"></label>
                                        <input type="text" placeholder="您的用户名" required id="login_username" onChange={(e) => { setUsername(e.target.value) }} />
                                    </li>
                                    <li>
                                        <label className="iconfont iconmima" htmlFor="login_password"></label>
                                        <input type="password" placeholder="您的密码" required id="login_password" onChange={(e) => { setPassword(e.target.value) }} />
                                    </li>
                                    <li className="login_btn">
                                        <input type="button" value="登录" onClick={(e) => { loginClick(e) }} />
                                    </li>
                                </ul>
                            </form>
                        </div>
                    ) : (
                            <div className="register_form">
                                <form>
                                    <ul>
                                        <li>
                                            <label className="iconfont iconyonghu" htmlFor="register_username"></label>
                                            <input type="text" placeholder="您的用户名" required id="register_username" onChange={(e) => { setUsername(e.target.value) }} />
                                        </li>
                                        <li>
                                            <label className="iconfont iconshoujihao" htmlFor="register_phone"></label>
                                            <input type="text" placeholder="您的手机号码" required id="register_phone" onChange={(e) => { setPhone(e.target.value) }} />
                                        </li>
                                        <li>
                                            <label className="iconfont iconmima" htmlFor="register_password"></label>
                                            <input type="password" placeholder="您的密码" required id="register_password" onChange={(e) => { setPassword(e.target.value) }} />
                                        </li>
                                        <li>
                                            <label className="iconfont iconmima" htmlFor="register_repassword"></label>
                                            <input type="password" placeholder="确认密码" required id="register_repassword" onChange={(e) => { setRePassword(e.target.value) }} />
                                        </li>
                                        <li className="register_btn">
                                            <input type="button" value="注册" onClick={(e) => { registerClick(e) }} />
                                        </li>
                                    </ul>
                                </form>
                            </div>
                        )
                }
            </div>
            <div className="login_footer">
                <p>&copy; CopyRight; 2020/02/12 -- MR ChenGX make</p>
            </div>
        </div>
    )
}

export default Login